<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="alert alert-primary" title="已提交" role="alert">{{ getAnswerbyid.name }}</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{getAnswerbyid.name}}</span>
            <el-button
              v-if="!getAnswerbyid.issee"
              @click="updateanswer(getAnswerbyid.ID)"
              style="float: right; padding: 3px 0"
              type="text"
            >标记已处理</el-button>
          </div>
          <div style="display:flex;margin-bottom:10px;background:#2F81F1;color:#fff;height:43px;line-height: 43px;border-radius: 5px;">
          <div class="text item" style="flex:1">ID : {{getAnswerbyid.ID}}</div>
          <div class="text item" style="flex:1">姓名 : {{getAnswerbyid.name}}</div>
          <div class="text item" style="flex:1">年龄 : {{getAnswerbyid.info.age}}</div>
          <div class="text item" style="flex:1">手机号 : {{getAnswerbyid.info.phonenum}}</div>
          <div class="text item" style="flex:1">性别 : {{sex(getAnswerbyid.info.sex)}}</div>
          <div class="text item" style="flex:1">分数 : {{fraction}}</div>
          </div>
          <el-table :data="thisTeacheritembankitembank.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
            <el-table-column prop="name" label="题目">
              <template slot-scope="scope">
            <label class="form-check-label" style="flex:1;">{{scope.$index+1}} {{thisItembank(scope.row).title}}   </label>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="用户答案">
              <template slot-scope="scope">
                <div class="correct" v-if="getAnswerbyid.info.answers[scope.$index]==zzanswers(thisItembank(scope.row).answer)">
                  {{getAnswerbyid.info.answers[scope.$index]}}
                </div>
                <div class="question" v-else style="color:red;">
                  {{getAnswerbyid.info.answers[scope.$index]}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="标准答案">
              <template slot-scope="scope">
                <div v-if="thisItembank(scope.row).type =='多选'">
                  {{zzanswers(thisItembank(scope.row).answer)}}
                </div>
                <div v-else v-text="thisItembank(scope.row).answer"></div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="选项">
              <template slot-scope="scope">
                <div v-text="thisItembank(scope.row).type"></div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="分数">
              <template slot-scope="scope">
                <div v-text="thisItembank(scope.row).fraction"></div>
              </template>
            </el-table-column>
          </el-table>
             <el-pagination
  small
  v-show="this.thisTeacheritembankitembank.length>20"
  @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20]"
        :page-size="20"
  layout="total, sizes, prev, pager, next, jumper"
  :total="this.thisTeacheritembankitembank.length">
</el-pagination>
        </el-card>
      </el-col>

      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { asyncupdateanswer  } from "../../../plugins/api.js";
import _ from "underscore";
export default {
  name: "useranswer",
   data() {
    return {
      fraction:'',
       currentPage: 1,
      pagesize: 20,
    }
  },
   watch: {
     currentPage(v) {
      console.log(v);
    },
    pagesize(v) {
      console.log(v);
    },
  },
  computed: {
    ...mapGetters([
      "getAnswer",
      "getTeacheritembank",
      "getItembank",
      "getTeacheritembankitembank"
    ]),
    getAnswerbyid() {
      return this.getAnswer.find(v => v.ID == this.ID);
    },
    thisTeacheritembankitembank() {
      const id = this.getAnswerbyid.teacheritembankid;
      return this.getTeacheritembankitembank.filter(
        v => v.teacheritembankid == id
      );
    }
  },
  async mounted() {
      await this.start();
  },
  props: ["ID"],
  methods: {
    async start() {
      var num =0
      const arrer=[]
         for(let k of this.thisTeacheritembankitembank){
           arrer.push( this.getItembank.find(vo => vo.ID == k.itembankid))
         }
         for(let i in arrer){
           if(arrer[i].answer==this.getAnswerbyid.info.answers[i]){

             num=num+arrer[i].fraction

           }
         }
         this.fraction=num
    },
     handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSelectionChange() {},
    thisItembank(v) {
      return this.getItembank.find(vo => vo.ID == v.itembankid);
    },

    sex(i) {
      switch (Number(i)) {
        case 1:
          return "男";
        case 2:
          return "女";
      }
    },
    zzanswers(data) {
      try {
        return _.compact(data.split(","));
      } catch (err) {
        return [];
      }
    },
    async updateanswer(ID) {
      this.$confirm("是否标记已处理?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await asyncupdateanswer({ ID:ID });
          this.$store.dispatch("actionAnswer");
          this.$message({
            type: "success",
            message: "成功!"
          });
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>
